<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<style>
		    * {
		        margin: 0px;
		        padding: 0px;
		    }
		    #tou>div{
		        width: 125px;
		        height: 50px;
		        color: black;
		       
		        float: left;
		        text-align: center;
		        line-height: 50px;
		
		
		
		    }
		
		   
		    .box {
		
		        width: 750px;
		        height: 150px;
		        margin: 30px auto;
		
		    }
		
		    #tou{
		        height: 50px;
		        border-bottom: 2px solid #eee;
		    }
		    
		
		
		
		    .pic {
		        width: 750px;
		        height: 500px;
		
		        margin-top: 20px;
		    }
		    
		
		   
		
		    .pic>div:nth-of-type(2) {
		        display: none;
		    }
		
		    .pic>div:nth-of-type(3) {
		        display: none;
		    }
		
		    .pic>div:nth-of-type(4) {
		        display: none;
		    }
		
		    .pic>div:nth-of-type(5) {
		        display: none;
		    }
		
		    .pic>div:nth-of-type(6) {
		        display: none;
		    }
		
		    .pic>div:nth-of-type(7) {
		        display: none;
		    }
		      img{
		        width: 750px;
		        height: 500px;
		    }
		    #line{
		        width: 120px;
		        height: 5px;
		        position: absolute;
		        bottom: -5px;
		        left: 0px;
		        background-color:red;
		     
		    }
		    #tou{
		        position: relative;
		       
		    }
		
		   
		  
		</style>
		
		<body>
		    <div class="box">
		        <div id="tou">
		            <div> 融e购</div>
		            <div> 汇款支付</div>
		            <div> 消费俞游</div>
		
		
		            <div> 留学贷款</div>
		
		            <div> 移动金融</div>
		            <div> 个人贷款</div>
		            <span id="line"></span>
		
		        </div>
		        <div class="pic" id="pic">
		            <div> <img src="images/8.jpg  " /></div>
		
		            <div> <img src="images/6.jpg  " /></div>
		
		            <div> <img src="images/10.jpg  " /></div>
		
		            <div> <img src="images/9.jpg  " /></div>
		            <div> <img src="images/5.jpg  " /></div>
		            <div> <img src="images/7.jpg  " /></div>
		
		            <div><img src="images/2.jpg  " /> </div>
		        </div>
		    </div>
		    <script>
		         let   arrs = tou.children;
		      
		     let divs = pic.children;
		       
		        for (let i = 0; i < arrs.length; i++) {
		            if(arrs[i].id=="line")  continue;
		            arrs[i].onclick = function () {
		                for (let j = 0; j < divs.length; j++) {
		                    if(i==j){
		
		                    divs[j].style.display = "block";
		                    line.style.left=125*i+"px";
		                   
		                    }else{
		                        divs[j].style.display="none";
		
		                
		                }
		                }
		
		            }
		
		        }
		
		
		
		
		
		
		
		    </script>
	</body>
</html>
